<script>
//编辑组件页面
import CardEditLeftSider from '../charteditor/CardEditLeftSider';
import FormEditRightSider from './FormEditRightSider';
import FormCard from '../../card/FormCard';
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';
import * as types from '@/store/types';
import * as utils from '@/utils/helps';

export default {
  name: 'FormCardEdit',
  components: {
    CardEditLeftSider,
    FormEditRightSider,
    FormCard,
  },
  mixins: [WorkSpaceQuery],
  data() {
    return {
      sheetFieldList: [],
      columns: [],
      isInitialized: false,
      indeterminate: true,
      checkAll: false,
      checkAllGroup: [],
    };
  },
  computed: {
    allControl() {
      return this.$store.getters.controls;
    },
    controls() {
      if (Object.keys(this.allControl).length !== 0) {
        if (this.$store.getters.currentId === '') {
          this.$store.commit(types.UPDATA_APPLY_CURRENTID, this.$router.history.current.params.id);
          return this.allControl[this.$router.history.current.params.id];
        } else {
          return this.allControl[this.$store.getters.currentId];
        }
      } else {
        return {
          appearance: {
            type: '',
          },
        };
      }
    },
    appData() {
      return this.$store.state.app.appData;
    },
  },
  watch: {
    controls(newVal) {
      if (newVal.options.data && newVal.options.data.rows.length !== 0) {
        this.initControl(newVal);
      }
    },
  },
  beforeMount() {
    if (Object.keys(this.allControl).length === 0) {
      this.getLastAppData();
    } else {
      const controlData = this.allControl[this.$store.getters.currentId];
      this.initControl(controlData);
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  },
  methods: {
    initControl(newVal) {
      if (!this.isInitialized) {
        this.setFieldList(newVal.options.data.rows[0]);
        this.setIncludeFields(newVal);
        this.isInitialized = true;
      }
    },
    setIncludeFields(data) {
      let fields = [];
      if (data.options.data.rows.length > 0) {
        fields = Object.keys(data.options.data.rows[0]);
      }
      let excludeFields = data.options.settings.excludeFields || [];
      this.checkAllGroup = fields.filter(p => excludeFields.indexOf(p) < 0);
    },
    setFieldList(list) {
      const data = utils.deepCopy(list);
      this.sheetFieldList = [];
      for (let k of Object.keys(data)) {
        this.sheetFieldList.push({ value: k, label: k });
        this.columns.push(k);
      }
    },
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;
      if (this.checkAll) {
        this.checkAllGroup = this.columns;
      } else {
        this.checkAllGroup = [];
      }
      this.updataChartConfig();
    },
    checkAllGroupChange(data) {
      if (data.length === this.columns.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
      this.updataChartConfig();
    },
    gotoCard() {
      this.$router.push('/workspace/' + this.appData.id);
    },
    //保存应用
    saveCard() {
      this.upDataAppConfig(
        {
          path: `${window.location.origin}/workspace/${this.appData.id}`,
          info: JSON.stringify(this.allControl),
        },
        {
          id: this.appData.id,
        }
      );
    },
    //提交store
    updataChartConfig() {
      let excludeFields = this.columns.filter(p => this.checkAllGroup.indexOf(p) < 0);
      this.controls.options.settings.excludeFields = excludeFields;
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: this.controls },
      });
    },
  },
};
</script>
<template>
  <div class="layout">
    <Layout>
      <Header>
        <Row>
          <Col span="2">
          <Button
            type="text"
            title="返回"
            @click="gotoCard">
            <Icon
              type="arrow-left-a"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          </Col>
          <Col span="4">
          <h1 style="color:white">编辑图表</h1>
          </Col>
          <Col span="16">
          <div style="width:100%"></div>
          </Col>
          <Col
            span="2"
            style="float:right">
          <Button
            type="text"
            title="保存"
            @click="saveCard">
            <Icon
              type="document"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          <Dropdown
            transfer
            trigger="click">
            <Button
              type="text"
              title="导出">
              <Icon
                type="android-more-vertical"
                size="36"
                color="#ffffff"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="exportComponent">导出组件</DropdownItem>
              <DropdownItem name="exportConfig">导出配置</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          </Col>
        </Row>
      </Header>
      <Layout>
        <Sider
          class="sider-left"
          hide-trigger>
          <CardEditLeftSider :field-list="sheetFieldList"></CardEditLeftSider>
        </Sider>
        <Layout class="sider-content">
          <Content :class="{'card-edit-content':true}">
            <div class="card-edit-fields">
              <div class="field-row">
                <h2>选择显示字段</h2>
              </div>
              <div class="field-row">
                <Checkbox
                  :indeterminate="indeterminate"
                  :value="checkAll"
                  @click.prevent.native="handleCheckAll">全选</Checkbox>
              </div>
              <div class="field-row">
                <CheckboxGroup
                  v-model="checkAllGroup"
                  @on-change="checkAllGroupChange">
                  <Checkbox
                    v-for="(item,index) in columns"
                    :key="index"
                    :label="item"></Checkbox>
                </CheckboxGroup>
              </div>
            </div>
            <div class="card-edit-item">
              <FormCard :all-options="controls.options"></FormCard>
            </div>
          </Content>
        </Layout>
        <Sider
          class="sider-right"
          hide-trigger>
          <FormEditRightSider></FormEditRightSider>
        </Sider>
      </Layout>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

.k-layout {
  height: calc(~'100vh');
}

.sider-left,
.sider-right {
  background-color: #e8ebed;
}

.sider-right {
  width: 320px !important;
  min-width: 200px !important;
  max-width: 400px !important;
  flex: 0 0 320px !important;
}

.content-top {
  height: 100px;
}
.card-edit-content {
  padding: 10px 24px;
  min-height: 300px;
  background: #ffffff;

  .card-edit-fields {
    padding: 0 10px;
    .field-row {
      padding: 8px 5px;
      border-bottom: 1px solid #e9e9e9;
      > h2 {
        color: #666666;
      }
    }
  }

  .card-edit-item {
    min-height: 400px;
    height: calc(~'100vh - 290px');
    margin-top: 20px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }
}
</style>
